<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件渲染(常用指令)</title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			.red{
				color:red;
			}
			.green{
				color:green;
			}
			#box{
				width:250px;
				min-height:300px;
				border:2px solid black;
				margin: 50px auto;
				padding:20px;
			}
			p{
				margin:20px 0;
			}
			button{
				margin:20px 0;
				border:none;
				cursor:pointer;
				background-color:black;
				color:white;
				width:100%;
				height:30px;
				line-height:30px;
			}
			button:hover{
				background-color:red;
				color:white;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span>选择：&nbsp;&nbsp;v-if &nbsp;&nbsp;&nbsp;&nbsp;v-else</span><p v-if="isCreated" class="red">对应值为true,动态创建if分支节点</p>
			<p v-else class="green">对应值为false,动态创建else分支节点</p><hr>
			
			<template v-if="isCreated">
				<div>hello</div>
				<div>hello</div>
				<div>hello</div>
				<div>hello</div>
			</template>
			<button @click="handleClick1">我是动态创建和删除</button>
			<hr>
			
			<p v-show="isShow">我是动态的隐藏和显示</p>
			<button @click="handleClick">我是动态的隐藏和显示</button>
		</div>
		
		<script>
			/* 
			 条件渲染：
			 1,v-if//动态创建和删除
			 2,v-else v-else-if
			 3,template v-if //配合使用，使得多个节点统一使用v-if；template不会被浏览器渲染解析，所有不会破坏页面
			 ========================================================================================================
			 4,v-show//动态隐藏和显示
			 5,v-text 指令可以更新元素的textContent.
			 6,v-html指令更新元素的innerHTML.
			 7,元素标签上添加$ref="xx" -->获取该元素节点：this.$refs.xx
			 8,v-cloak ： 能够解决插值表达式闪烁的问题
			 9,v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名
			 10,v-bind ：是vue提供的用于绑定属性的指令。可以简写为  :要绑定的指令。实现数据的单向绑定。从M 自动绑定到V 
			 11,v-model 指令则可以实现表单元素和 M中数据的双向绑定。注意：v-model指令只能运用在表单元素中。
			 12,v-on ：事件监听可以使用 v-on 指令 
			 */
			var vm = new Vue({
				el:"#box",
				data:{
					name:"wuhao",
					isCreated:true,
					isShow:true
				},
				methods:{
					handleClick:function(){
						this.isShow=!this.isShow;
					},
					handleClick1:function(){
						this.isCreated=!this.isCreated;
					}
				}
			})
		</script>
	</body>
</html>
